<template>
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :destory-on-close="true"
    :title="title"
    :visible.sync="dialogFormVisible"
    width="65%"
    @close="close"
  >
    <div class="personal-center-container">
      <el-row :gutter="20">
        <el-card shadow="hover">
          <!-- 领队基本信息 -->
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="基本信息" name="first">
              <el-col :lg="12" :md="16" :sm="24" :xl="12" :xs="24">
                <el-form ref="form" label-width="80px" :model="form">
                  <el-form-item label="领队姓名">
                    {{ form.leaName }}
                  </el-form-item>

                  <el-form-item label="身份">
                    <span v-if="form.authEnterprise == 1">企业</span>
                    <span v-if="form.authEnterprise == 0">个人</span>
                  </el-form-item>
                  <el-form-item
                    v-if="form.authEnterprise == 1"
                    label="营业执照"
                  >
                    <img :src="form.enterpriseLicense" />
                  </el-form-item>
                  <el-form-item
                    v-if="form.authEnterprise == 1"
                    label="企业名称"
                  >
                    {{ form.enterpriseName }}
                  </el-form-item>
                  <el-form-item label="头像">
                    <img :src="form.headPortrait" />
                  </el-form-item>
                  <el-form-item label="所属协作公司">
                    {{ form.ofEnterprise }}
                  </el-form-item>
                  <el-form-item label="联系电话">
                    {{ form.phone }}
                  </el-form-item>
                  <el-form-item label="创建时间">
                    {{ form.createTime }}
                  </el-form-item>
                </el-form>
              </el-col>
            </el-tab-pane>
            <!-- 领队演员 -->
            <el-tab-pane label="领队演员" name="second">
              <el-table
                v-loading="listLoading"
                border
                :data="yanyuanlist"
                @selection-change="setSelectRows"
              >
                <el-table-column
                  align="center"
                  show-overflow-tooltip
                  type="selection"
                />

                <el-table-column
                  align="center"
                  label="姓名"
                  prop="name"
                  show-overflow-tooltip
                />
                <el-table-column
                  align="center"
                  label="性别"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <template v-if="scope.row.sex == 0">
                      <span>女</span>
                    </template>
                    <template v-else-if="scope.row.sex == 1">
                      <span>男</span>
                    </template>
                  </template>
                </el-table-column>

                <el-table-column
                  align="center"
                  label="联系电话"
                  prop="phone"
                  show-overflow-tooltip
                />

                <el-table-column
                  align="center"
                  label="出生年月"
                  prop="birthday"
                  show-overflow-tooltip
                />
                <el-table-column
                  align="center"
                  label="演员头像"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <img
                      :src="scope.row.actorPicture"
                      style="width: 50px; height: 50px"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="创建时间"
                  prop="creationTime"
                  show-overflow-tooltip
                />

                <template #empty>
                  <el-image
                    class="vab-data-empty"
                    :src="require('@/assets/empty_images/data_empty.png')"
                  />
                </template>
              </el-table>
              <el-pagination
                background
                :current-page="queryFormtwo.pageNum"
                :layout="layouttwo"
                :page-size="queryFormtwo.pageSize"
                :total="totaltwo"
                @current-change="handleCurrentChangetwo"
                @size-change="handleSizeChangetwo"
              />
            </el-tab-pane>
            <!-- 领队事项 -->
            <el-tab-pane label="领队事项" name="three">
              <el-table
                v-loading="listLoading"
                border
                :data="selectedOptions"
                @selection-change="setSelectRows"
              >
                <el-table-column
                  align="center"
                  show-overflow-tooltip
                  type="selection"
                />

                <el-table-column
                  align="center"
                  label="职位标题"
                  prop="jobHead"
                  show-overflow-tooltip
                />
                <el-table-column
                  align="center"
                  label="职位内容"
                  prop="jobInfo"
                  show-overflow-tooltip
                />

                <el-table-column
                  align="center"
                  label="联系人"
                  prop="linkmans"
                  show-overflow-tooltip
                />

                <el-table-column
                  align="center"
                  label="联系人手机号"
                  prop="linkphone"
                  show-overflow-tooltip
                />
                <el-table-column
                  align="center"
                  label="联系人微信号"
                  prop="linkWxnum"
                  show-overflow-tooltip
                />
                <el-table-column
                  align="center"
                  label="创建时间"
                  prop="createTime"
                  show-overflow-tooltip
                />

                <template #empty>
                  <el-image
                    class="vab-data-empty"
                    :src="require('@/assets/empty_images/data_empty.png')"
                  />
                </template>
              </el-table>
              <el-pagination
                background
                :current-page="queryForm.pageNum"
                :layout="layout"
                :page-size="queryForm.pageSize"
                :total="total"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
              />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-row>
      <vab-cropper ref="vabCropper" />
    </div>
  </el-dialog>

  <!-- 增加 -->
</template>

<script>
  /* eslint-disable*/
  import { getwoList, getthreeList } from '@/api/lingdui'
  import { geturl } from '@/api/yanyuan'

  import {
    provinceAndCityData,
    regionData,
    provinceAndCityDataPlus,
    regionDataPlus,
    CodeToText,
    TextToCode,
  } from 'element-china-area-data'
  import { mapGetters } from 'vuex'
  import VabMagnifier from '@/extra/VabMagnifier'
  import VabCropper from '@/extra/VabCropper'

  export default {
    name: 'xiangqing',
    components: { VabCropper, VabMagnifier },
    data() {
      return {
        intsfenshu: '', //当前分数
        listLoading: true,
        idall: '', //给子组件传递的id
        idCardFront: '', //正面
        idCardReverse: '', //范面
        activeName: 'first', //默认展示第一项
        options: regionDataPlus,
        selectedOptions: [], //当前领队所属的事项
        yanyuanlist: [], //当前领队所管理的演员列表
        keyWord: '', //关键词
        videolists: [], //视频列表
        fenshulists: [], //分数列表
        selectRows: '',
        token: '',
        imageUrl: '',
        imageUrltwo: '', //摩卡
        getlist: '',
        value: true,
        value1: true,
        dialogVisible: false,
        disabled: false,
        options1: [],
        options2: [],
        options3: [],
        shfenone: '', //身份证整
        shfentwo: '', //身份证反面
        options5: [
          {
            id: 1,
            creClasName: '审核通过',
          },
          {
            id: 0,
            creClasName: '审核未通过',
          },
        ],
        options6: [
          {
            id: 1,
            creClasName: '审核通过',
          },
          {
            id: 0,
            creClasName: '审核未通过',
          },
        ],
        valueone: '', //查询
        valuetwo: '',
        shujv: '暂无数据',
        form: {},
        layout: 'total, sizes, prev, pager, next, jumper',
        layouttwo: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        totaltwo: 0,
        formtwo: {},
        formalls: {}, //履历信息保存
        formthree: {
          starUserId: 683, //移动端用户id
          checkValue: '', //审核的结果
          rejectReason: '', //拒绝原因
        },
        queryForm: {
          pageNum: 1,
          pageSize: 10,
          leaderId: '', //领队id
        },
        queryFormtwo: {
          pageNum: 1,
          pageSize: 10,
          leaderId: '', //领队id
          leaderCheck: '', //领队审核 0-未审核 1-审核通过 2-审核未通过
          starTime: '', //开始时间
          endTime: '', //结束时间
          keyWord: '', //关键词
        },
        activated() {
          if (this.$refs.MaskVideo.src) this.$refs.MaskVideo.play()
        },
        deactivated() {
          if (this.$refs.MaskVideo.src) this.$refs.MaskVideo.pause()
        },

        rules: {
          rejectReason: [
            { required: true, trigger: 'blur', message: '请输入驳回原因' },
          ],
          checkValue: [
            { required: true, trigger: 'change', message: '请选择审核状态' },
          ],
        },
        rulesTWO: {
          rejectReason: [
            { required: true, trigger: 'blur', message: '请输入驳回原因' },
          ],
          checkValue: [
            { required: true, trigger: 'change', message: '请选择审核状态' },
          ],
        },
        title: '',
        dialogFormVisible: false,
      }
    },
    created() {
      this.token = this.$store.getters['user/token']
    },
    computed: {
      ...mapGetters({
        avatar: 'user/avatar',
      }),
    },
    methods: {
      // handleDelete(row) {
      //   console.log('rwo', row)
      //   console.log('rowid', row.id)
      //   //停用
      //   if (row.id) {
      //     this.$baseConfirm('你确定要停用当前项吗', null, async () => {
      //       const { msg } = await doDelete({ ids: row.id })
      //       this.$baseMessage(msg, 'success', 'vab-hey-message-success')
      //       await this.fetchData()
      //     })
      //   }
      // },
      setSelectRows(val) {
        this.selectRows = val
      },

      onSubmit() {
        this.$baseMessage('模拟保存成功', 'success', 'vab-hey-message-success')
      },
      openDialog() {
        this.$refs['vabCropper'].dialogVisible = true
      },
      handleClick(tab, event) {},
      enterprise(e) {
        this.form.enterprise = e.id

        this.getlist = e.leaNickName
      },

      handleChange(a) {
        this.form.particulars = a
      },

      showEdit(row) {
        if (!row) {
          //==if(row=='')
          this.title = '添加'
        } else {
          console.log(row.id)
          this.title = '领队详情'
          this.form = row
          this.formtwo = row
          this.idall = row.id
          this.idCardReverse = row.idCardReverse
          this.idCardFront = row.idCardFront
          this.queryForm.leaderId = row.id
          if (this.form.enterpriseLicense) {
            this.fetchDatatwo()
          }
          this.lingduilist()
          this.geteditorlist()
        }
        this.dialogFormVisible = true
      },
      handleCurrentChange(val) {
        //领队所发布的页码
        this.queryForm.pageNum = val
        this.lingduilist()
      },
      handleCurrentChangetwo(val) {
        //领队演员的页码
        this.queryForm.pageNum = val
        this.geteditorlist()
      },
      handleSizeChange(val) {
        //领队所发布的页码
        this.queryForm.pageSize = val
        this.lingduilist()
      },
      handleSizeChangetwo(val) {
        //领队演员的页面大小
        this.queryForm.pageSize = val
        this.geteditorlist()
      },
      async lingduilist() {
        //领队所发布的列表
        this.listLoading = true
        const res = await getwoList(this.queryForm)
        this.selectedOptions = res.data.records
        this.total = res.data.total
        this.listLoading = false
      },
      async geteditorlist() {
        //领队旗下的演员列表
        this.listLoading = true
        const res = await getthreeList(this.queryForm)
        this.yanyuanlist = res.data.dataList
        this.totaltwo = res.data.total
        this.listLoading = false
      },

      close() {
        let userId = this.form.userId
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        if (!this.form.id) {
          this.form.userId = userId
        }
        this.dialogFormVisible = false
        this.imageUrl = ''
        this.imageUrltwo = ''
      },
      closetwo() {
        this.formtwo.checkValue = ''
        this.formtwo.rejectReason = ''
        this.dialogFormVisible = false
      },
      sethealth(e) {
        this.form.health = e
      },
      sethealthtwo(e) {
        this.form.workType = e
      },

      nickNameChange() {
        this.$forceUpdate()
      },
      queryDatass() {
        this.queryData()
      },
      optosall(e) {
        this.formtwo.checkValue = e.id
      },
      optosallTWO(e) {
        this.formthree.checkValue = e.id
      },
      queryData() {
        //chaxun
        this.disabled = true
        let keyWord = this.keyWord
        const msg = serach({
          keyWord: keyWord,
        })
        msg.then((res) => {
          if (res.msg == 'success') {
            this.options1 = res.data
          }
        })
      },
      async fetchDatatwo() {
        const res = await geturl({
          f: this.form.enterpriseLicense,
        })
        console.log(res)
        this.form.enterpriseLicense = res
      },
    },
  }
</script>
<style lang="scss" scoped>
  .avatar-uploader .el-upload {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    width: 178px;
    height: 178px;
    font-size: 28px;
    line-height: 178px;
    color: #8c939d;
    text-align: center;
  }
  .avatar {
    display: block;
    width: 178px;
    height: 178px;
  }
  .baocun {
    width: 100%;
    height: 100%;
  }
  $base: '.personal-center';
  #{$base}-container {
    padding: 0 !important;
    background: $base-color-background !important;

    #{$base}-user-info {
      padding: $base-padding;
      text-align: center;

      ::v-deep {
        .el-avatar {
          img {
            cursor: pointer;
          }
        }
      }

      &-full-name {
        margin-top: 15px;
        font-size: 24px;
        font-weight: 500;
        color: #262626;
      }

      &-description {
        margin-top: 8px;
      }

      &-follow {
        margin-top: 15px;
      }

      &-list {
        margin-top: 18px;
        line-height: 30px;
        text-align: left;
        list-style: none;

        h5 {
          margin: -20px 0 5px 0;
        }

        ::v-deep {
          .el-tag {
            margin-right: 10px !important;
          }

          .el-tag + .el-tag {
            margin-left: 0;
          }
        }
      }
    }

    #{$base}-item {
      display: flex;

      i {
        font-size: 40px;
      }

      &-content {
        box-sizing: border-box;
        flex: 1;
        margin-left: $base-margin;

        &-second {
          margin-top: 8px;
        }
      }
    }
  }
</style>
